<template>
	<el-row :gutter="15" class="bigBox">
		<el-col :span="6">
			<div class="leftBox">
				<div class="bottonBox">
					<el-button type="primary" size="medium" @click="dialogVisible = true">新增业务系统</el-button>
					<!-- <el-button type="danger" size="medium" @click="deleteDialogVisible = true">删除</el-button> -->
				</div>
				<div style="width: 70%;margin: 20px 0px;">
					<!-- <el-input placeholder="请输入内容" v-model="input" clearable>
					</el-input> -->
				</div>
				<div style="width: 100%;height: 1px;border-bottom: solid 1px gainsboro;"></div>
				<div class="leftConBox">
					<div :class="[chooseId == item.icd?'leftCon':'isLeftCon']" v-for="(item,index) in leftBoxList"
						@click="choose(item.icd,item.name)">
						<div
							style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;width: 95%;margin: 0 auto;">
							<div class="jiedianName" :title="item.name">
								<div style="display: flex;flex-direction: row;align-items: center;">{{index+1}}</div>
								<div style="width: 10px;height: 20px;border-right: solid 1px gainsboro;"></div>
								<div class="nameWord">
									{{item.name}}
								</div>
							</div>
							<div style="width:55%">
								<el-button type="success" size="mini" v-show="chooseId == item.icd"
									@click="editNameDialogVisible = true,editNodeInput = item.name,editNodeIcd = item.icd">
									编辑</el-button>
								<el-button type="primary" size="mini" v-show="chooseId == item.icd"
									@click="openAddServer(item.icd,item.name)">
									添加</el-button>
								<el-button type="danger" size="mini" v-show="chooseId == item.icd"
									@click="deleteDialogVisible = true">
									删除</el-button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</el-col>
		<el-drawer title="性能分析报告" :visible.sync="drawer2" :direction="direction" size="100%" @close="drawerClose2"
			v-loading="reportloading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
			<div style="margin: 0 auto;width: 55%;" id="printContent">
				<div class="titleBox">目&nbsp;&nbsp;&nbsp;录</div>
				<div>
					<div style="font-size: 24px;margin-left: 10%;">
						<a href="#os">
							一、服务器状态
						</a>
					</div>
					<div v-for="[key, value] of Object.entries(allData)">
						<a :href="'#'+ value.lable">
							<span
								style="font-size: 18px;margin-left: 10%;color:#606266;">{{value.lable}}{{value.type}}{{key}}详情</span>
						</a>
					</div>
				</div>
				<div>
					<div style="font-size: 24px;margin-left: 10%;">
						<a href="#db">
							二、数据库状态
						</a>
					</div>
					<div v-for="[key, value] of Object.entries(DataBaseData)">
						<a :href="'#'+ value.SYSTEMNAME">
							<span
								style="font-size: 18px;margin-left: 10%;color:#606266;">{{value.ip}}{{value.SYSTEMNAME}}详情</span>
						</a>
					</div>
				</div>
				<div style="background-color: white;border-radius: 3px;width: 99%;height: auto;">
					<div style="font-size: 22px;margin-left: 5%;" id="os">1、服务器状态</div>
					<div style="width:95%;margin: 10px auto;background-color: white;"
						v-for="[key, value] of Object.entries(allData)">
						<div
							style="display: flex;flex-direction: row;width: 100%;justify-content: space-between;align-items: center;margin: 0 auto;padding: 10px;">
							<div style="font-size: 24px;color: red;font-weight: bold;" :id="value.lable">
								（{{value.lable}}){{value.type}}{{key}}详情</div>
							<el-button v-show="value.type == 'Network'" type="primary" @click="chooseDB(key)">
								丢包率
							</el-button>
						</div>
						<div style="width: 100%;" v-if="flag">
							<div style="width: 100%;height: 300px;">
								<img :src="value.imgList[0]" style="width: 100%;height:auto;" mode="widthFix">
							</div>
							<div style="width: 100%;height: 300px;">
								<img :src="value.imgList[1]" style="width: 100%;height:auto;" mode="widthFix">
							</div>
							<div style="width: 100%;height: 300px;">
								<img :src="value.imgList[2]" style="width: 100%;height:auto;" mode="widthFix">
							</div>
							<div style="width: 100%;height: 300px;">
								<img :src="value.imgList[3]" style="width: 100%;height:auto;" mode="widthFix">
							</div>
						</div>
						<div class="tableBox">
							<div style="margin-left: 6%;font-size:18px;font-weight: bold;">告警信息</div>
							<div class="scollBox">
								<template>
									<el-table :data="value.alert" style="width: 100%" height="250" border
										:header-cell-style="headClass" :cell-style="rowClass">
										<el-table-column type="index" width="50" fixed label="序号" align="center">
										</el-table-column>
										<el-table-column prop="type" label="系统类型" width="80" align="center">
										</el-table-column>
										<el-table-column prop="alertLevel" label="告警级别" width="80" align="center">
											<template slot-scope="scope">
												<div v-if="scope.row.alertLevel == 1">
													<div
														style="margin: 0 auto;width: 50px;background-color: #67C23A;height: 25px;line-height: 25px;border-radius: 5px;color: white;">
														提醒</div>
												</div>
												<div v-if="scope.row.alertLevel == 2">
													<div
														style="margin: 0 auto;width: 50px;background-color: #E6A23C;height: 25px;line-height: 25px;border-radius: 5px;color: white;">
														普通</div>
												</div>
												<div v-if="scope.row.alertLevel == 3">
													<div
														style="margin: 0 auto;width: 50px;background-color: #F56C6C;height: 25px;line-height: 25px;border-radius: 5px;color: white;">
														紧急</div>
												</div>
											</template>
										</el-table-column>
										<el-table-column prop="infotype" label="信息类型" width="150" align="center">
										</el-table-column>
										<el-table-column prop="alertinfo" label="告警信息" width="150" align="center">
										</el-table-column>
										<el-table-column prop="recordTime" label="录入时间" width="135" align="center">
											<template slot-scope="scope">
												{{changeTime(scope.row.recordTime)}}
											</template>
										</el-table-column>
										<el-table-column prop="servicesname" label="业务系统名" width="100" align="center">
										</el-table-column>
										<el-table-column prop="systemname" label="系统名称" width="100" align="center">
										</el-table-column>
										<!-- <el-table-column prop="monObject" label="告警对象" width="100" align="center">
										</el-table-column> -->
									</el-table>
								</template>
							</div>
						</div>
					</div>
					<div style="font-size: 22px;margin: 5%;" id='db'>2、数据库状态</div>
					<div style="width:95%;margin: 10px auto;background-color: white;"
						v-for="[key, value] of Object.entries(DataBaseData)">
						<div
							style="display: flex;flex-direction: row;width: 100%;justify-content: space-between;align-items: center;margin: 0 auto;padding: 10px;">
							<div style="font-size: 24px;color: red;font-weight: bold;margin-left: 3%;"
								:id="value.SYSTEMNAME">
								{{value.ip}}{{value.SYSTEMNAME}}详情
							</div>
						</div>
						<div style="width: 100%;" v-if="flag">
							<div class="dbTitle">DBTIME</div>
							<div style="width: 100%;height: 300px;">
								<img :src="value.imgList[1]" style="width: 100%;height:auto;" mode="widthFix">
							</div>
							<div class="dbTitle">IO</div>
							<div style="width: 100%;height: 300px;">
								<img :src="value.imgList[0]" style="width: 100%;height:auto;" mode="widthFix">
							</div>
							<div class="dbTitle">会话数</div>
							<div style="width: 100%;height: 300px;">
								<img :src="value.imgList[2]" style="width: 100%;height:auto;" mode="widthFix">
							</div>
						</div>
						<div class="tableBox">
							<div style="margin-left: 6%;font-size:18px;font-weight: bold;">告警信息</div>
							<div class="scollBox">
								<template>
									<el-table :data="value.alert" style="width: 100%" height="250" lazy border
										:header-cell-style="headClass" :cell-style="rowClass">
										<el-table-column type="index" width="50" fixed label="序号" align="center">
										</el-table-column>
										<el-table-column prop="type" label="系统类型" width="80" align="center">
										</el-table-column>
										<el-table-column prop="alertLevel" label="告警级别" width="80" align="center">
											<template slot-scope="scope">
												<div v-if="scope.row.alertLevel == 1">
													<div class="tipBox1">
														提醒</div>
												</div>
												<div class="tipBox2" v-if="scope.row.alertLevel == 2">
													<div>
														普通</div>
												</div>
												<div v-if="scope.row.alertLevel == 3">
													<div class="tipBox3">
														紧急</div>
												</div>
											</template>
										</el-table-column>
										<el-table-column prop="infotype" label="信息类型" width="150" align="center">
										</el-table-column>
										<el-table-column prop="alertinfo" label="告警信息" width="150" align="center">
										</el-table-column>
										<el-table-column prop="recordTime" label="录入时间" width="135" align="center">
											<template slot-scope="scope">
												{{changeTime(scope.row.recordTime)}}
											</template>
										</el-table-column>
										<el-table-column prop="servicesname" label="业务系统名" width="100" align="center">
										</el-table-column>
										<el-table-column prop="systemname" label="系统名称" width="100" align="center">
										</el-table-column>

										<!-- <el-table-column prop="monObject" label="告警对象" width="100" align="center">
										</el-table-column> -->
									</el-table>
								</template>
							</div>
						</div>
					</div>
				</div>
			</div>
		</el-drawer>
		<el-drawer :title="showTime1() +' 至 ' + showTime2() + '性能分析报告'" :visible.async="drawer" :direction="direction"
			size="100%" @close="drawerClose">
			<div style="margin: 10px 0px;display: flex;flex-direction: row;justify-content: flex-end;"><el-button
					type="primary" @click="getType(1)">导出报告</el-button></div>
			<div class="reportBox">
				<el-row>
					<el-col :span="12">
						<div class="reportName">
							<div style="width: 30%;">

							</div>
							<div style="width: 40%;">
								服务器状态
							</div>
							<div class="searchBox">
								<el-select v-model="inputName" filterable placeholder="请选择IP" clearable
									style="width: 150px;">
									<el-option v-for="item in chooseIpList" :label="item.ip" :value="item.lable">
									</el-option>
								</el-select>
								<a :href="'#' + inputName" style="margin-left: 10px;">
									<el-button type="primary" size="mini">搜索</el-button>
								</a>
							</div>
						</div>
						<div class="reLeftBox">
							<div style="width:95%;margin: 10px auto;background-color: white;"
								v-for="[key, value] of Object.entries(allData)">
								<div class="reportTitleBox">
									<div class="daochuBox" :id="value.lable">
										（{{value.lable}}){{value.type}}{{key}}详情
										<!-- <div v-show="key == fristList[0]">
											<el-button type="primary" @click="getType(1)">导出报告</el-button>
										</div> -->
									</div>
									<el-button v-show="value.type == 'Network'" type="primary" @click="chooseDB(key)">
										丢包率
									</el-button>
								</div>
								<ReportContent @imgList="changeImg" :allData="value" />
							</div>
						</div>
					</el-col>
					<el-col :span="12">
						<div class="reportName">
							<div style="width: 30%;">
							</div>
							<div style="width: 40%;">
								数据库状态
							</div>
							<div class="searchBox">
								<el-select v-model="inputName2" filterable placeholder="请选择IP" clearable
									style="width: 150px;">
									<el-option v-for="item in dbChooseList" :label="item.ip + '/' + item.SYSTEMNAME"
										:value="item.SYSTEMNAME">
									</el-option>
								</el-select>
								<a :href="'#' + inputName2" style="margin-left: 10px;">
									<el-button type="primary" size="mini">搜索</el-button>
								</a>
							</div>
						</div>
						<div class="reRightBox">
							<div class="sjk_con">
								<template v-for="[key, value] of Object.entries(DataBaseData)">
									<el-card class="box-card" :key="key">
										<div slot="header" class="clearfix" :id="value.SYSTEMNAME">
											<div
												style="width: 100%;display: flex;flex-direction: row;justify-content: space-between;">
												<span
													style="font-size: 24px;color: red;font-weight: bold;">{{value.SYSTEMNAME}}{{ value.ip }}详情
												</span>
												<!-- <div v-show="value.ip == dbfristList[0]">
													<el-button type="primary" @click="getDBreport()">导出报告</el-button>
												</div> -->
											</div>
										</div>
										<div v-if="drawer">
											<VDataBasePerformancefrom @imgList="getDBInfo" :itemData="value" />
										</div>
									</el-card>
								</template>
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
		</el-drawer>
		<!-- 添加弹出框 -->
		<el-dialog title="新增业务系统" :visible.sync="dialogVisible" width="30%">
			<el-input placeholder="请输入业务系统名称" v-model="addInput" clearable>
			</el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false,addInput = ''">取 消</el-button>
				<el-button type="primary" @click="addFormNode()">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 丢包率时间选择 -->
		<el-dialog title="选择时间" :visible.sync="chooseDBDialogVisible" width="30%">
			<template>
				<div class="block" style="width: 100%;display: flex;flex-direction: row;justify-content: center;">
					<el-date-picker v-model="diubaoTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
						placeholder="选择日期时间" :picker-options="expireTimeOPtion">
					</el-date-picker>
				</div>
				<div
					style="font-size: 11px;color: red;width: 100%;display: flex;flex-direction: row;justify-content: center;">
					*查询输入时间前后一个小时的数据</div>
			</template>
			<span slot="footer" class="dialog-footer">
				<el-button @click="chooseDBDialogVisible = false">取 消</el-button>
				<el-button type="primary" :loading="DBLoading" @click="diubao()">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 丢包率 -->
		<el-dialog title="丢包率" :visible.sync="diuibaoDialogTableVisible">
			<el-table :data="gridData" style="width: 100%" height="500">
				<el-table-column fixed prop="ifname" label="ifname" width="150">
				</el-table-column>
				<el-table-column prop="inerrors" label="inerrors" width="120">
				</el-table-column>
				<el-table-column prop="inuti" label="inuti" width="120">
				</el-table-column>
				<el-table-column prop="phy" label="phy" width="120">
				</el-table-column>
				<el-table-column prop="protocol" label="protocol" width="100">
				</el-table-column>
				<el-table-column prop="recordTime" label="recordTime" width="200">
				</el-table-column>
				<el-table-column prop="resType" label="resType" width="150">
				</el-table-column>
				<el-table-column prop="sn" label="sn" width="150">
				</el-table-column>
			</el-table>
		</el-dialog>
		<!-- 添加设备弹出框 -->
		<el-dialog title="添加设备" :visible.sync="addServerDiolog" width="30%">
			<template>
				<div class="tpyeBox">
					<div style="margin-left: 10%;width: 20%;text-align: right;">设备类型：</div>
					<el-select v-model="value" placeholder="请选择设备类型" @change="chooseServer()">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</div>
				<div class="tpyeBox">
					<div style="margin-left: 10%;width: 20%;text-align: right;">IP/名称：</div>
					<el-select v-model="serverName" filterable placeholder="请选择设备IP名称">
						<el-option v-for="item in serverList" :key="item.bcid" :label="item.serverName"
							:value="item.bcid">
						</el-option>
					</el-select>
				</div>
			</template>
			<span slot="footer" class="dialog-footer">
				<el-button @click="addServerDiolog = false">取 消</el-button>
				<el-button type="primary" @click="addServer()">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 修改节点名称 -->
		<el-dialog title="修改节点" :visible.sync="editNameDialogVisible" width="30%">
			<el-input placeholder="请输入内容节点名称" v-model="editNodeInput" clearable>
			</el-input>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editNameDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="editNodeName()">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 删除弹出框 -->
		<el-dialog title="提示" :visible.sync="deleteDialogVisible" width="30%">
			<span>此操作将永久删除数据，是否删除？</span>
			<span slot="footer" class="dialog-footer">
				span
				<el-button @click="deleteDialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="deleteNode()">确 定</el-button>
			</span>
		</el-dialog>
		<el-col :span="18">
			<div class="fenxibaogao">
				<template>
					<div class="block">
						<div>
							<el-date-picker v-model.lazy="startTime" @change="change" value-format="yyyy-MM-dd HH:mm:ss"
								:picker-options="expireTimeOPtion" type="datetime" placeholder="选择开始日期时间">
							</el-date-picker>
						</div>
					</div>
					<div style="margin: 0px 10px 0px 10px;">至</div>
					<div class="block">
						<div>
							<el-date-picker v-model.lazy="endTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime"
								placeholder="结束日期时间">
							</el-date-picker>
						</div>
					</div>
				</template>
				<el-button style="margin-left: 20px;" type="primary" icon="el-icon-document" @click="getReport()">
					生成性能分析报告
				</el-button>
			</div>

			<div class="rightBox">
				<template>
					<el-table :data="tableData" border style="width: 100%" height="760" :cell-style="rowClass"
						:header-cell-style="headClass" v-loading="loading">
						<el-table-column fixed label="序号" width="50" type="index">
						</el-table-column>
						<el-table-column prop="name" label="业务系统" width="180">
							<template slot-scope="scope">
								<div>{{nodeName}}</div>
							</template>
						</el-table-column>
						<el-table-column prop="ip" label="IP" width="120">
						</el-table-column>
						<el-table-column label="系统名称/操作系统" width="250">
							<template slot-scope="scope">
								<div v-if="scope.row.osType">{{scope.row.osType}}</div>
								<div v-if="scope.row.systemname">{{scope.row.systemname}}</div>
							</template>
						</el-table-column>
						<el-table-column label="类型" width="150">
							<template slot-scope="scope">
								<div v-if="scope.row.osType">{{scope.row.osType}}</div>
								<div v-if="scope.row.dbtype">{{scope.row.dbtype}}</div>
							</template>
						</el-table-column>
						<el-table-column prop="port" label="端口" width="100">
						</el-table-column>
						<!-- <el-table-column prop="zip" label="所属监控组" width="150">
						</el-table-column> -->
						<el-table-column prop="createdate" label="创建时间" width="220">
							<template slot-scope="scope">
								{{changeTime(scope.row.createdate)}}
							</template>
						</el-table-column>
						<el-table-column label="操作" width="150">
							<template slot-scope="scope">
								<el-button v-if="scope.row.hid" type="danger" size="mini"
									@click="deleteServer(scope.row.hid)">删除</el-button>
								<el-button v-if="scope.row.cid" type="danger" size="mini"
									@click="deleteServer(scope.row.cid)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</template>
			</div>
		</el-col>
	</el-row>
</template>

<script>
	import {
		nodeAllData,
		deleteNode,
		addNode,
		editNode,
		submitAdmin,
		getManagementNodeOs,
		getServerData,
		addServer,
		deleteServer,
		postJavaServerData
	} from '@/api/index.js';
	import {
		Data,
		Log
	} from '@icon-park/vue';
	import docxtemplater from 'docxtemplater';
	import PizZip from 'pizzip';
	import JSZipUtils from 'jszip-utils';
	import {
		Officegen
	} from "officegen";
	import {
		saveAs
	} from 'file-saver';
	import ReportContent from '../../management/components/ReportContent.vue'
	import VDataBasePerformancefrom from "../../management/components/DataBasePerformance.vue";
	import Axios from 'axios';
	import moment from "moment";
	import {
		indexedDb
	} from "@/utils/IndexedDB.js";
	import {
		log
	} from '@antv/g2plot/lib/utils';
	// import { values } from 'core-js/library/fn/dict';
	export default {
		components: {
			ReportContent,
			VDataBasePerformancefrom
		},
		data() {
			return {
				cpuTimeList: [],
				cpuValueList: [],
				ioTimeList: [],
				ioValueList: [],
				memoryTimeList: [],
				memoryValueList: [],
				netTimeList: [],
				netValueList: [],
				maxIo: '',
				maxCpu: '',
				maxMemory: '',
				cpuMsg: '',
				ioMsg: '',
				memoryMsg: '',
				netMsg: '',
				input: "",
				chooseId: 1,
				inputName2: '',
				allData: {},
				startTime: '',
				endTime: new Date(),
				dbPhotoList: [],
				abc: {
					value: 1,
					value: 2
				},
				echartUrl: [],
				clients: [],
				dbChooseList: [],
				reportInfo: [{
					startTime: '',
					endTime: '',
					type: '',
				}],
				backList: [],
				flag: false,
				inputName: '',
				drawer2: false,
				chooseIp: [],
				fristList: [],
				drawer: false,
				daochuDialogVisible: false,
				chooseDBDialogVisible: false,
				diuibaoDialogTableVisible: false,
				DataBaseData: {},
				ServerData: {},
				areaType: {
					server: ["cpu", "memory", "network"],
					dataBase: ["back", "dbtime", "session", "total_io", "alert", 'write_read_io', 'file_io', 'sql',
						'topwait', 'SYSTEMNAME'
					],
				},
				gridData: [],
				direction: 'rtl',
				butLoading: '',
				chooseTime: [new Date(new Date().getFullYear(), new Date().getMonth(), new Date().getDate() - 1, new Date()
					.getHours(), new Date().getMinutes(), new Date().getSeconds()), new Date()],
				serverName: '',
				nodeName: '',
				nodeIcd: '',
				diubaoTime: '',
				dbfristList: [],
				reportloading: false,
				dbosServerList: '',
				loading: false,
				value: '',
				serverList: [],
				mulu: [],
				photoList: [],
				options: [{
						label: '服务器',
						value: 1
					},
					{
						label: '数据库',
						value: 2
					},
					{
						label: '网络设备',
						value: 3
					}
				],
				addServerDiolog: false,
				netData: {
					opera: "GetHostMonitor",
					curPage: 1,
					pageSize: 1000000,
					sort: {
						sortColumn: "",
						sortOrders: "",
					},
					filtersType: "fuzzyquery",
					filters: {
						OS_TYPE: "Network"
					},
				},
				postData: {
					opera: "GetDBMonitor",
					curPage: 1,
					pageSize: 1000000,
					sort: {
						sortColumn: "",
						sortOrders: "",
					},
					filtersType: "fuzzyquery",
					filters: {},
				},
				baseImg: [],
				leftBoxList: [],
				dbReportList: [],
				test: [],
				editNodeIcd: '',
				chooseIpList: [],
				DBLoading: false,
				editNodeInput: '',
				editNameDialogVisible: false,
				addInput: '',
				deleteDialogVisible: false,
				nodeForm: {
					icd: '',
					name: '',
					bcid: ''
				},
				dialogVisible: false,
				tableData: [],
				expireTimeOPtion: {
					disabledDate(time) {
						return time.getTime() > Date.now() - 8.64e6; //如果没有后面的-8.64e6就是不可以选择今天的 
					}
				},

			};
		},
		created() {
			this.getData()
			this.firstTime()
		},
		mounted() {

		},

		methods: {
			async getData() {
				let res = await nodeAllData()
				// console.log(555, res)
				this.chooseId = res[0].icd
				this.nodeName = res[0].name
				this.leftBoxList = res
				this.getAllData()
			},
			shenme(value) {

			},
			changeImg(value) {

				this.photoList = value
				this.baseImg.push(value)

				for (let key in this.allData) {
					if (this.photoList.ip == this.allData[key].ip) {
						this.allData[key].imgList = this.photoList
					}
				}

			},
			//设置默认时间，endtime为默认当前时间，starttime为当前时间减五小时
			firstTime() {
				let time = Date.parse(new Date(this.endTime))
				let startTime = parseInt(time) - 3600000 * 5
				this.startTime = this.changeTime(startTime)
				this.endTime = this.changeTime(time)
			},
			//选择starttime之后，endtime为当前时间加五小时
			change() {
				let time = Date.parse(new Date(this.startTime))
				let endTime = parseInt(time) + 3600000 * 5
				this.endTime = this.changeTime(endTime)
			},
			getDBInfo(value) {
				this.dbPhotoList = value
				for (let key in this.DataBaseData) {
					if (this.dbPhotoList.ip == this.DataBaseData[key].ip) {
						this.DataBaseData[key].imgList = this.dbPhotoList
					}
				}
			},
			drawerClose() {
				this.drawer = false
			},
			drawerClose2() {
				this.drawer2 = false
			},
			chooseDB(key) {
				this.gridData = []
				this.diubaoKey = key
				this.chooseDBDialogVisible = true
			},
			// toPdf() {
			// 	console.log("echars图表", this.allData)

			// },
			/**
			 * description： 导出echarts图片，格式转换
			 *
			 * created by aa on 2020-08-18
			 *
			 */
			base64DataURLToArrayBuffer(dataURL) {
				const base64Regex = /^data:image\/(png|jpg|svg|svg\+xml);base64,/;
				if (!base64Regex.test(dataURL)) {
					return false;
				}
				const stringBase64 = dataURL.replace(base64Regex, "");
				let binaryString;
				if (typeof window !== "undefined") {
					binaryString = window.atob(stringBase64);
				} else {
					binaryString = new Buffer(stringBase64, "base64").toString("binary");
				}
				const len = binaryString.length;
				const bytes = new Uint8Array(len);
				for (let i = 0; i < len; i++) {
					const ascii = binaryString.charCodeAt(i);
					bytes[i] = ascii;
				}
				return bytes.buffer;
			},
			getDBreport() {
				this.dbReportList = []
				this.dbReportList = this.DataBaseData
				this.dbReportList.forEach((item, index) => {
					item.index = index + 1
					if (item.alert.length > 0) {
						item.alert.forEach((j, number) => {
							j.index = number + 1
							j.recordTime = this.changeTime(j.recordTime)
							if (j.alertLevel == 3) {
								item.dbType = '✖'
								item.dbMsg = '服务器告警'
							} else {
								item.dbType = '✔'
								item.dbMsg = '无严重告警'
							}
						})
					}
					if (item.topwait.length > 0) {
						item.topwait.forEach((j, number) => {
							j.index = number + 1
							j.recordTime = this.changeTime(j.recordTime)
						})
					}
					if (item.file_io.length > 0) {
						item.file_io.forEach((j, number) => {
							j.index = number + 1
						})
					}
					if (item.write_read_io.length > 0) {
						item.write_read_io.forEach((j, number) => {
							j.index = number + 1
						})
					}
					item.imgList = item.imgList.slice(0, 3).map(item => {
						return {
							url: item
						}
					})
					item.file_io.forEach((j) => {
						j.recordTime = this.changeTime(j.recordTime)
					})
				})
				console.log('数据库', this.dbReportList)
			},
			async getType(type) {
				this.butLoading = this.$loading({
					lock: true,
					text: '正在导出中，请耐心等待',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				this.clients = []
				this.cpuTimeList = [],
					this.cpuValueList = [],
					this.ioTimeList = [],
					this.ioValueList = [],
					this.memoryTimeList = [],
					this.memoryValueList = [],
					this.netTimeList = [],
					this.netValueList = [],
					console.log('a', this.baseImg)
				let filteredArray = this.baseImg.map(subArray => {
					let uniqueNames = new Set(); // 使用 Set 存储已经出现的 name 属性值
					return subArray.filter(obj => {
						if (obj.hasOwnProperty('name')) {
							if (!uniqueNames.has(obj.name)) {
								uniqueNames.add(obj.name); // 将当前 name 属性值添加到 Set 中
								return true; // 返回 true 以保留当前对象
							}
							return false; // 返回 false 以过滤重复的对象
						} else {
							return true; // 如果对象没有 name 属性，则保留该对象
						}
					});
				});
				console.log('base', filteredArray)
				let os = this.dbosServerList.os
				const _postDataBaseData = {
					a: os,
					time: this.startTime,
					time2: this.endTime,
				};
				let res = await postJavaServerData('/Sp/osPerformanceprint', _postDataBaseData)
				console.log('查询的值', res)
				this.clients = res
				this.clients.forEach((item, index) => {
					this.baseImg.forEach((img) => {
						if (item.ip == img[0].ip) {
							item.imgList = img
						}
					})
					item.index = index + 1
					item.tipList = []
					item.network.forEach((j) => {
						j.num = (j.rxKbyteSpeed + j.txKbyteSpeed).toFixed(2)
						j.recordTime = this.changeTime(j.recordTime)
					})
					item.memory.forEach((memory) => {
						memory.Proportion = (100 * memory.usedPer).toFixed(2)
					})
					item.cpu.forEach((cpu) => {
						cpu.Proportion = (100 - cpu.cpuIdle).toFixed(2)
					})
					if (item.cpu.length > 0) {
						item.maxCpu = item.cpu.reduce(function(prev, current) {
							return (prev.cpuIdle < current.cpuIdle) ? prev : current
						});
						if (item.maxCpu.cpuIdle < 10) {
							item.cpuMsg = '在查询时间段内,cpu使用率在' + item.maxCpu.recordTime + '时间点达到了峰值,为' + item
								.maxCpu.Proportion + '%',
								item.cpuType = '✖'
							let a = 'cpu使用率过高'
							item.tipList.push(a)
						} else {
							item.cpuMsg = '在查询时间段内,cpu使用率均低于90%',
								item.cpuType = '✔'
						}
					} else {
						item.cpuMsg = '在查询时间段内,cpu使用率均低于90%',
							item.cpuType = '✔'
					}
					if (item.memory.length > 0) {
						item.maxMemory = item.memory.reduce(function(prev, current) {
							return (prev.usedPer > current.usedPer) ? prev : current
						});
						if (item.maxMemory.usedPer > 0.9) {
							item.memoryMsg = '在查询时间段内,内存使用率在' + item.maxMemory.recordTime + '时间点达到了峰值,为' + item
								.maxMemory.Proportion + '%',
								item.memoryType = '✖'
							let a = '内存使用率过高'
							item.tipList.push(a)
						} else {
							item.memoryMsg = '在查询时间段内,内存使用率均低于90%',
								item.memoryType = '✔'
						}
					} else {
						item.memoryMsg = '在查询时间段内,内存使用率均低于90%',
							item.memoryType = '✔'
					}
					if (item.io.length > 0) {
						item.maxIo = item.io.reduce(function(prev, current) {
							return (prev.ioIdle > current.ioIdle) ? prev : current
						});
						if (item.maxIo.ioIdle > 90) {
							item.ioMsg = '在查询时间段内,io使用率在' + item.maxIo.recordTime + '时间点达到了峰值,为' + item.maxIo
								.ioIdle + '%',
								item.ioType = '✖'
							let a = 'io使用率过高'
							item.tipList.push(a)
						} else {
							item.ioMsg = '在查询时间段内,io使用率均低于90%',
								item.ioType = '✔'
						}
					} else {
						item.ioMsg = '在查询时间段内,io使用率均低于90%',
							item.ioType = '✔'
					}
				})
				console.log(123123, this.clients)
				this.reportInfo[0].startTime = this.startTime
				this.reportInfo[0].endTime = this.endTime
				this.getDBreport()
				this.toOSWord()
			},
			sfm(value) {
				const fullTime = value // 你的时间字符串
				const timeParts = fullTime.split(' ')[1].split(':'); // 提取时分秒部分
				return `${timeParts[0]}:${timeParts[1]}:${timeParts[2]}`;
			},
			toOSWord() {
				var ImageModule = require('open-docxtemplater-image-module');
				// 点击导出word
				let _this = this;
				// 读取并获得模板文件的二进制内容
				JSZipUtils.getBinaryContent("/domo.docx", function(error, content) {
					// exportTemplate.docx是模板。我们在导出的时候，会根据此模板来导出对应的数据
					// 抛出异常
					if (error) {
						throw error;
					}
					// 图片处理
					let opts = {}
					opts.centered = true; // 图片居中，在word模板中定义方式为{%%image}
					opts.fileType = "docx";
					opts.getImage = function(chartId) {
						return _this.base64DataURLToArrayBuffer(chartId);
					}
					opts.getSize = function() {
						return [650, 230]
					}

					let imageModule = new ImageModule(opts);
					// 创建一个PizZip实例，内容为模板的内容
					let zip = new PizZip(content);
					// 创建并加载docxtemplater实例对象
					let doc = new docxtemplater();
					doc.attachModule(imageModule);
					doc.loadZip(zip);
					// 设置模板变量的值
					doc.setData({
						clients: _this.clients,
						reportInfo: _this.reportInfo,
						dbReportList: _this.dbReportList,
					});
					try {
						// 用模板变量的值替换所有模板变量
						doc.render();
					} catch (error) {
						// 抛出异常
						let e = {
							message: error.message,
							name: error.name,
							stack: error.stack,
							properties: error.properties
						};
						throw error;
					}
					// 生成一个代表docxtemplater对象的zip文件（不是一个真实的文件，而是在内存中的表示）
					let out = doc.getZip().generate({
						type: "blob",
						mimeType: "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
					});
					// 将目标文件对象保存为目标类型的文件，并命名
					saveAs(out, _this.nodeName + _this.startTime + '-' +_this.endTime +"性能报告.docx");
				});
				console.log(this.nodeName)
				this.butLoading.close()
			},

			// toPdf() {
			// 	console.log("echars图表", this.allData)
			// 	this.drawer2 = true
			// 	this.reportloading = true
			// 	this.flag = true
			// 	setTimeout(() => {
			// 		this.printpage()
			// 	}, 1000)
			// },
			async printpage() {
				let newstr = await document.getElementById("printContent").innerHTML;
				// let oldstr = await document.body.innerHTML;
				document.body.innerHTML = newstr;
				print();
				document.body.innerHTML = '';
				this.drawer2 = false
				this.$router.go(0);
			},
			async diubao() {
				this.DBLoading = true
				this.chooseIp = []
				this.tableData.forEach((item, index) => {
					if (item.ip == this.diubaoKey) {
						this.chooseIp.push(item)
					}
				})
				let time = Date.parse(new Date(this.diubaoTime))
				let time1 = parseInt(time) - 3600000
				let time2 = parseInt(time) + 3600000
				const DB = {
					a: this.chooseIp,
					time: this.changeTime(time1),
					time2: this.changeTime(time2)
				};
				await postJavaServerData('/Sp/PacketlossRate', DB).then((res) => {
					if (res.data && res.data.length > 0) {
						this.gridData = res.data
						this.diuibaoDialogTableVisible = true
						this.DBLoading = false
						this.chooseDBDialogVisible = false
					} else {
						this.gridData = []
						this.diuibaoDialogTableVisible = true
						this.DBLoading = false
						this.chooseDBDialogVisible = false
					}
				}).catch((err) => {
					this.diuibaoDialogTableVisible = true
					this.DBLoading = false
					this.chooseDBDialogVisible = false
				})


			},
			changeTime(timestamp) {
				let date = new Date(parseInt(timestamp));
				let Year = date.getFullYear();
				let Moth = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1);
				let Day = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate());
				let Hour = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours());
				let Minute = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
				let Sechond = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
				return Year + '-' + Moth + '-' + Day + ' ' + Hour + ':' + Minute + ':' + Sechond;
			},
			async getAllData() {
				this.loading = true
				this.tableData = []
				let res = await getServerData({
					icd: this.chooseId,
					name: '',
					bcid: ''
				})
				this.dbosServerList = res
				this.loading = false
				if (res != null) {
					let db = res.DB
					let os = res.os
					if (db.length > 0) {
						db.forEach((item, index) => {
							this.tableData.push(item)
						})
					}
					if (os.length > 0) {
						os.forEach((item, index) => {
							this.tableData.push(item)
						})
					}
				}
			},
			dateformars(timestamp) {
				let time = new Date(timestamp)
				let year = time.getFullYear()
				let month = time.getMonth() + 1
				let date = time.getDate()
				let hours = time.getHours()
				let minute = time.getMinutes()
				let second = time.getSeconds()
				if (month < 10) {
					month = '0' + month
				}
				if (date < 10) {
					date = '0' + date
				}
				if (hours < 10) {
					hours = '0' + hours
				}
				if (minute < 10) {
					minute = '0' + minute
				}
				if (second < 10) {
					second = '0' + second
				}
				return year + '-' + month + '-' + date + ' ' + hours + ':' + minute + ':' + second
			},
			dateFormat(row) {
				//row 当前行
				var date = row.createdate //获取当前行的时间
				const time = new Date(date) //时间戳转化为 new Date
				if (date == undefined) {
					return "";
				} else {
					if (time.getMinutes() < 10) {
						if (time.getSeconds() < 10) {
							const nowtime = time.getFullYear() + "/" + (time.getMonth() + 1) + "/" +
								time.getDate() + "-" + time.getHours() + ":" + '0' + time.getMinutes() + ":0" + time
								.getSeconds()
							return nowtime
						} else {
							const nowtime = time.getFullYear() + "/" + (time.getMonth() + 1) + "/" +
								time.getDate() + "-" + time.getHours() + ":" + '0' + time.getMinutes() + ":" + time
								.getSeconds()
							return nowtime
						}
					} else {
						if (time.getSeconds() < 10) {
							const nowtime = time.getFullYear() + "/" + (time.getMonth() + 1) + "/" +
								time.getDate() + "-" + time.getHours() + ":" + '0' + time.getMinutes() + ":0" + time
								.getSeconds()
							return nowtime
						} else {
							const nowtime = time.getFullYear() + "/" + (time.getMonth() + 1) + "/" +
								time.getDate() + "-" + time.getHours() + ":" + '0' + time.getMinutes() + ":" + time
								.getSeconds()
							return nowtime
						}
					}
				}

			},
			chooseServer() {
				this.serverName = ''

				let num = this.value
				if (num == 1) {
					this.getDatabase()
				} else if (num == 2) {
					this.getServerData()
				} else if (num == 3) {
					this.getNetworkData()
				}
			},
			openAddServer(id, nodeName) {
				this.nodeIcd = id
				this.nodeName = nodeName
				this.value = ''
				this.serverName = ''
				this.addServerDiolog = true
			},
			async addServer() {
				let res = await addServer({
					icd: this.nodeIcd,
					name: '',
					bcid: this.serverName
				})

				if (res.return == '添加成功' || res.return == '修改成功!') {
					this.$message.success('添加成功')
					this.addServerDiolog = false
					this.getAllData()
				} else {
					if (res) {
						this.$message.error(res.return)
						this.addServerDiolog = false
					} else {
						this.$message.error('添加失败!')
						this.addServerDiolog = false
					}
				}
			},
			getServerData() {
				submitAdmin({
					postData: JSON.stringify(this.postData),
				}).then((res) => {
					let arr = res.data
					this.serverList = arr
					arr.forEach((item, index) => {
						let a = arr[index].IP + '/' + arr[index].SYSTEMNAME
						let b = arr[index].CID
						this.serverList[index].serverName = a
						this.serverList[index].bcid = b
					})

				})
			},
			getNetworkData() {
				submitAdmin({
					postData: JSON.stringify(this.netData),
				}).then((res) => {
					let arr = res.data
					this.serverList = arr
					arr.forEach((item, index) => {
						let a = arr[index].IP + '/' + arr[index].OS_TYPE
						let b = arr[index].HID
						this.serverList[index].serverName = a
						this.serverList[index].bcid = b
					})

				})
			},
			async getDatabase() {
				let res = await getManagementNodeOs({
					ip: '',
					ostpye: '',
					isenabled: '',
				})
				let arr = res
				this.serverList = arr
				arr.forEach((item, index) => {
					let a = arr[index].ip + '/' + arr[index].os_TYPE
					let b = arr[index].hid
					this.serverList[index].serverName = a
					this.serverList[index].bcid = b
				})
			},
			async getReport() {

				const loading = this.$loading({
					lock: true,
					text: '导出数据较多，请耐心等待',
					spinner: 'el-icon-loading',
					background: 'rgba(0, 0, 0, 0.7)'
				});
				if (this.dbosServerList == null) {
					loading.close();
					this.$message.error('暂无数据')
				} else {
					this.allData = {}
					this.DataBaseData = {}
					let db = this.dbosServerList.DB
					let os = this.dbosServerList.os
					const _postServerData = {
						b: db,
						time: this.startTime,
						time2: this.endTime,
					};
					const _postDataBaseData = {
						a: os,
						time: this.startTime,
						time2: this.endTime,
					};
					let res1 = await postJavaServerData('/Sp/dbPerformance', _postServerData)
					console.log('db', res1)
					this.DataBaseData = res1
					this.DataBaseData.forEach((item, index) => {
						this.dbfristList.push(item.ip)
					})
					this.dbChooseList = res1

					// this.disposeDataForDataBase(res1)
					let res2 = await postJavaServerData('/Sp/osPerformance', _postDataBaseData)
					console.log('os', res2)
					this.allData = res2
					for (let key in this.allData) {
						this.allData[key].ip = key
						this.fristList.push(key)
					}
					this.chooseIpList = Object.values(res2)
					this.drawer = true
					loading.close();
				}
			},
			showTime1() {
				return this.dateformars(this.startTime)
			},
			showTime2() {
				return this.dateformars(this.endTime)
			},
			disposeDataForDataBase(data) {
				let AreaData = {},
					_index,
					_ip,
					_type;
				for (const [key, value] of Object.entries(data)) {
					_index = this.areaType.dataBase.findIndex((item) => key.includes(item));
					if (_index !== -1) {
						_type = this.areaType.dataBase[_index];
						_ip = key.replace(_type, "");
						if (!AreaData[_ip]) {
							AreaData[_ip] = {};
						}
						AreaData[_ip][_type] = value;
					}
				}
				for (let key in AreaData) {
					AreaData[key].cid = key
				}
				// console.log(888,AreaData);
				this.dbChooseList = Object.values(AreaData)
				this.DataBaseData = AreaData;
			},
			async deleteNode() {
				let res = await deleteNode({
					icd: this.chooseId,
					name: '',
					bcid: ''
				})
				if (res.return == '删除成功!') {
					this.$message.success(res.return)
					this.getData()
				} else {
					this.$message.error('删除失败!')
				}
				this.deleteDialogVisible = false
			},
			async deleteServer(id) {
				const confirmRes = await this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}).catch(err => err)
				if (confirmRes !== 'confirm') {
					return this.$message.info('已取消删除')
				}
				let res = await deleteServer({
					icd: this.chooseId,
					name: '',
					bcid: id
				})

				if (res.return == '删除成功') {
					this.$message.success(res.return)
					this.getAllData()
				} else {
					this.$message.error('删除失败!')
				}
				this.deleteDialogVisible = false
			},
			async editNodeName() {
				let res = await editNode({
					icd: this.editNodeIcd,
					name: this.editNodeInput,
					bcid: ''
				})
				if (res.return == '修改成功!') {
					this.$message.success(res.return)
					this.getData()
				} else {
					this.$message.error('修改失败!')
				}
				this.editNameDialogVisible = false
			},
			async addFormNode() {
				this.nodeForm.name = this.addInput
				let res = await addNode({
					icd: '',
					name: this.addInput,
					bcid: ''
				})
				if (res.return == '添加成功!') {
					this.$message.success(res.return)
					this.getData()
				} else {
					if (res) {
						this.$message.error(res.return)
					} else {
						this.$message.error('添加失败!')
					}
				}
				this.dialogVisible = false
				this.addInput = ''
			},
			choose(id, name) {
				this.chooseId = id
				this.nodeName = name
				this.getAllData()
			},
			handleClick(row) {

			},
			handleClose(done) {
				this.$confirm('确认关闭？')
					.then(_ => {
						done();
					})
					.catch(_ => {});
			},
			//表格内容居中
			rowClass() {
				return 'text-align:center;'

			},
			headClass() {
				return 'text-align:center;color:#606266;'
			}
		},
	};
</script>

<style scoped>
	@media print {
		@page {
			size: A4;
			/* margin: 1in 0 1.2in 0; */
		}

		.tableBox {
			page-break-before: always;
			/* 在元素前面插入分页符 */
		}

		.tipBox2 {
			background-color: #E6A23C;
		}
	}

	::v-deep .el-table__fixed-right {
		right: 0 !important;
		bottom: 0 !important;
	}

	::v-deep .el-table__body-wrapper {
		&::-webkit-scrollbar {
			width: 8px;
			background-color: #F5F5F5;
		}

		/* 设置滚动条轨道的样式 */
		&::-webkit-scrollbar-track {
			border-radius: 10px;
		}

		/* 设置滚动条滑块的样式 */
		&::-webkit-scrollbar-thumb {
			background-color: rgba(86, 152, 218, 0.6);
			border-radius: 10px;
		}
	}

	.el-drawer>>>header {
		margin-bottom: 0px !important;
	}

	.chartsBox {
		margin: 10px auto;
		width: 100%;
		height: 300px;
		background-color: white;
	}

	.scollBox {
		width: 95%;
		margin: 15px auto;
		color: black;
		height: 300px;
	}

	.searchBox {
		width: 30%;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
	}

	.daochuBox {
		font-size: 24px;
		color: red;
		font-weight: bold;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 99%;
	}

	a,
	a:visited,
	a:link,
	a:hover {
		color: black;
	}

	.dbTitle {
		width: 100%;
		font-size: 20px;
		margin: 15px 0px 15px 40px;
	}

	.titleBox {
		font-size: 40px;
		font-weight: bold;
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.sjk_con {
		overflow-y: scroll;
		/* background-color: white; */
	}

	.pdfBox {
		margin: 0 auto;
		width: 55%;
	}

	.sjk_con::-webkit-scrollbar {
		width: 3px;
		height: 3px;
	}

	.fenxibaogao {
		height: 40px;
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
	}

	.sjk_con::-webkit-scrollbar-thumb {
		border-radius: 3px;
	}

	.bigBox {
		padding: 15px;
		border-radius: 4px;
		background: #fff;
		height: auto;
	}

	.tipBox1 {
		margin: 0 auto;
		width: 50px;
		background-color: #67C23A;
		height: 25px;
		line-height: 25px;
		border-radius: 5px;
		color: white;
	}

	.tipBox2 {
		margin: 0 auto;
		width: 50px;
		background-color: #E6A23C;
		height: 25px;
		line-height: 25px;
		border-radius: 5px;
		color: white;
	}

	.tipBox3 {
		margin: 0 auto;
		width: 50px;
		background-color: #F56C6C;
		height: 25px;
		line-height: 25px;
		border-radius: 5px;
		color: white;
	}

	.tableBox {
		margin: 10px auto;
		width: 100%;
		height: 350px;
		color: black;
	}

	.reportTitleBox {
		display: flex;
		flex-direction: row;
		width: 100%;
		justify-content: space-between;
		align-items: center;
		margin: 0 auto;
		padding: 10px;
	}

	.reRightBox {
		width: 100%;
		height: 800px;
		overflow: scroll;
		background-color: white;
	}

	.reportName {
		width: 98%;
		margin: 5px auto;
		font-size: 18px;
		text-align: center;
		color: cadetblue;
		font-weight: bold;
		display: flex;
		flex-direction: row;
		justify-content: center;
	}

	.reLeftPDF {
		background-color: white;
		border-radius: 3px;
		width: 99%;
		height: auto;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
	}

	.reLeftPDFget {
		background-color: white;
		border-radius: 3px;
		width: 99%;
		height: auto;

	}

	.reLeftBox {
		background-color: white;
		border-radius: 3px;
		overflow: hidden;
		width: 99%;
		height: 800px;
		overflow: scroll;
	}

	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;
	}

	.reportBox {
		height: 850px;
		background-color: gainsboro;
		border-radius: 10px;
	}

	.tpyeBox {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 10px;
	}

	.jiedianName {
		display: flex;
		flex-direction: row;
		align-items: center;
		width: 45%;
	}

	.nameWord {
		width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		margin-left: 10px;
		font-size: 16px;
	}

	.leftConBox {
		height: 680px;
		margin-top: 15px;
		/* display: flex;
		flex-direction: column; */
		overflow-y: auto;
	}

	.leftCon {
		width: 98%;
		margin: 0 auto;
		border: solid 1px gainsboro;
		border-radius: 10px;
		height: 100px;
		/* background-color: red; */
		margin-bottom: 10px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		background-color: antiquewhite;
		cursor: pointer;
	}

	.isLeftCon {
		width: 98%;
		margin: 0 auto;
		border: solid 1px gainsboro;
		border-radius: 10px;
		height: 100px;
		margin-bottom: 10px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		cursor: pointer;
	}

	.leftBox {
		min-height: 800px;
		max-height: 800px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		padding: 10px;
		/* 	display: flex;
		flex-direction: column; */
	}

	div::-webkit-scrollbar {
		display: none;
	}

	.rightBox {
		min-height: 760px;
		max-height: 760px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		padding: 10px;
		overflow-y: auto;
	}

	.text {
		font-size: 14px;
	}

	.item {
		margin-bottom: 18px;
	}

	.clearfix:before,
	.clearfix:after {
		display: table;
		content: "";
	}

	.clearfix:after {
		clear: both;
	}

	.box-card {
		width: 100%;
		height: 100%;
	}
</style>